﻿@{
    ViewData["Title"] = "ChangeProducts";
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-inline ">
        &nbsp;&nbsp;
        产品编号：
        <div class="layui-inline ">
            <input class="layui-input layui-input-inline" name="productCode" id="productCode" />
        </div>&nbsp;&nbsp;
        产品名称：
        <div class="layui-inline ">
            <input class="layui-input layui-input-inline" name="productName" id="productName" />
        </div>
        &nbsp;&nbsp;&nbsp;
        <button type="button" id="btnSearch" class="layui-btn layui-btn-primary layui-bg-blue">搜索</button>
    </div>

    <table class="layui-hide" id="client" lay-filter="test">
    </table>

    <div id="demo-laypage-all"></div>

    <button style="float:right;margin-right:40px" type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="btnGetChecked">选择</button>
    <button style="float:right;margin-right:40px" type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="closes()">关闭</button>



    <!-- HTML Content -->
    <script src="~/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer; //弹层
            var table = layui.table; //表格
            var laypage = layui.laypage;
            querylist = function () {
                var productCode = $("#productCode").val();
                var productName = $("#productName").val();
                //执行一个 table 实例
                table.render({
                    elem: '#client'
                    , height: 520
                    , url: '/Procurement/GetProducts'// + name //数据接口
                    , where: {
                        productCode: productCode
                        , productName: productName
                    }
                    //, method: 'get'
                    , title: '选择产品'
                    , page: {
                        limit: 10,
                        limits: [10, 15, 20, 25],
                        prev: '上一页',
                        next: '下一页',
                        first: '首页',
                        last: '尾页'
                    }
                    , cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' }//锁定第一列
                        , { field: 'ProductCode', title: '产品编码', width: 150 }
                        , { field: 'ProductName', title: '产品名称', width: 150 }
                        , { field: 'ProductSpecification', title: '规格', width: 150 }
                        , { field: 'Category', title: '类别', width: 150 }
                        , { field: 'StorageUnit', title: '存储单位', width: 150 }
                        , { field: 'Unit', title: '包装类型', width: 150 }
                        , { field: 'UnitPrice', title: '单价', width: 150 }
                        , {
                            title: '重量', width: 150, templet: function (row) {
                                var sum = 0
                                return sum;
                                //var tmpHtml = "<input /> <button onclick=\"delete(" + row.id + ")\">测试</button>";
                                //return tmpHtml;
                            }
                        }
                        , { title: '显示名', width: 150 }
                    ]],
                    request: {
                        pageName: 'page',
                        limitName: 'limit',
                    },
                    done: function (res) {
                        return {
                            "code": res.code,
                            'count': res.count,
                            'data': res.data,
                        }
                        //表格绑定数据后的回调函数
                        layer.msg('权限展示完成！', {
                            icon: 1,
                            time: 1000
                        });
                        var id = this.id;
                        function changes(obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            console.log(data);
                        }
                    }
                });
                // 监听按钮点击事件
                document.getElementById('btnGetChecked').addEventListener('click', function () {
                    // 获取表格的选中状态
                    var checkStatus = table.checkStatus('client');

                    // 获取选中行的数据
                    var data = checkStatus.data;

                    // 打印选中行的数据（实际使用时可以根据需要处理这些数据）
                    console.log(data);

                    // 示例：将选中行的数据拼接成字符串并显示在页面上
                    // var result = data.map(row => JSON.stringify(row)).join('\n');
                    // console.log(result);
                    if (data.length === 0) {
                        return layer.msg('请选择一行');
                    }
                    console.log(JSON.stringify(data));
                    sessionStorage.setItem("products", JSON.stringify(data));
                    var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                    parent.layer.close(index);
                    window.location = '/Procurement/Add';
                });
            }

            querylist();

            $("#btnSearch").on("click", function () {
                querylist();
            })
        });

        function closes() {
            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
            parent.layer.close(index); // 再执行关闭
            // var index = parent.layer.getFrameIndex(window.name);
            // layer.close(index);
            //parent.layer.close(index);

            // layer.closeAll('iframe');
            // window.location = '/Procurement/Add';
        }
        
        
    </script>
</body>
</html>

